<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-for遍历对象</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>
    <body>
        <div id="app">
            <table border="1">
                <tr>
                    <td>序号</td>
                    <td>编号</td>
                    <td>名称</td>
                    <td>价格</td>
                </tr>
                <tr v-for="(product,index) in products">
                    <td>{{index}}</td>
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        //view model
        new Vue({
            el:"#app",
            data:{
                products:[
                    { id:1, name:"笔记本电脑", price:5000 },
                    { id:2, name:"手机", price:3000 },
                    { id:3, name:"电视", price:4000 }
                ]

            }
        });
        
    </script>
</html>